<template>
<div class="userbase">
      <div class="title">用户信息</div>
      <div class="mymes">
        <van-cell-group inset>
          <van-cell title="账号" :value="$store.getters.getUser.name" />
          <van-cell title="用户名称" :value="nickname" />
          <van-cell title="个性签名" :value="sign" />
          <van-cell title="目标成绩" :value="score" />
        </van-cell-group>
      </div>
      <div class="change">
        <router-link to="/changemy">
        <el-button type="primary" round>修改信息</el-button>
        </router-link>
        <el-button type="danger" round @click="exitAccount">退出登录</el-button>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      nickname:"",
      sign: "暂无签名，快来设置吧",
      score: "",
    };
  },
  methods: {
    //判断登录是否成功,成功将用户信息返回
    connet(mes){
      axios
        .post("http://127.0.0.1/list/login", mes, {
          headers: "application/x-www-form-urlencoded",
        })
        .then((res) => {
          console.log(res);
          let { data } = res;
          if (data.code == 200) {
            // let user = {userName,passWord};
            if(data.nickname == undefined){
              this.nickname = ""
            } else{
              this.nickname = data.nickname
            }
            if(data.score == undefined){
              this.score = ""
            } else{
              this.score = data.score
            }
            if(data.sign == undefined){
              this.sign = "暂无签名，快来设置吧"
            } else{
              this.sign = data.sign
            }
            // this.$store.commit('user',user);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //初始化页面 获取用户名来判断是否处于登录状态
    baseData(){
      let i = this.$store.getters.getUser.name;
      let mes = {
        userName : i,
        passWord : this.$store.getters.getUser.password
      }
      console.log(i);
      if(i == ""){
        // break;
      }else{
        this.connet(mes)
        this.username = i;
      }
      // this.ifLo = this.$store.getters.getUser.ifLo;
    },
    //退出登录
    exitAccount(){
      this.$store.dispatch("asyncUpdataUser", { name: ""});
      window.sessionStorage.removeItem('id')
      this.ifLo = true;
    },
    //将数据存储在sessionStorage中
    saveState(){
      window.sessionStorage.setItem('user',JSON.stringify(this.$store.state.user))
    }
  },
  mounted() {
    //监听页面刷新并调用saveState函数
    window.addEventListener('unload',this.saveState)
    this.baseData();
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 90vw;
  margin: 0 auto;
  max-width: 400px;
}
.register {
  position: fixed;
  bottom: 12vh;
  left: calc(50vw - 40px);
}
.register:hover {
  cursor: pointer;
}
.userbase {
  .title {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    right: 0;
    background: linear-gradient(to left, #29eac4, #4284db);
    line-height: 60px;
    text-align: center;
    font-weight: bold;
  }
  .mymes {
    margin-top: 80px;
  }
  .change{
    margin-top: 20px;
  }
}
h2 {
  margin: 40px;
}
a {
  color: #000;
}
</style>